<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<link href="/res/layui/css/layui.css" rel="stylesheet">
<link href="/static/music/css/bg.css" rel="stylesheet">
<link href="/static/music/css/iconfont.css" rel="stylesheet">
<style>
    .container {
        max-width: 45%;
        margin: 0 auto;
        padding: 20px;
        height: 54rem;
        top: 0;
        position: relative;
    }

    .player {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-top: 10px;
        height: 19rem;
    }

    .album-cover {
        width: 150px;
        height: 150px;
        overflow: hidden;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }

    .album-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .song-info {
        text-align: center;
        margin-bottom: 10px;
    }

    .controls {
        display: flex;
        align-items: center;
    }

    .play-btn,
    .pause-btn,
    .prev-btn,
    .next-btn {
        background-color: #333;
        color: #fff;
        border: none;
        border-radius: 50%;
        font-size: 20px;
        width: 40px;
        height: 40px;
        margin: 0 10px;
        cursor: pointer;
    }

    .play-btn:hover,
    .pause-btn:hover,
    .prev-btn:hover,
    .next-btn:hover {
        background-color: #666;
    }


    .sidebar {
        /*width: 40%;*/
        /*float: left;*/
        height: 18rem;
        background-color: #fafafa;
        padding: 20px;
        margin-top: 10px;
        border-radius: 10px;
        overflow-y: auto;
    }

    .sidebar h1 {
        margin-top: 0;
        text-align: center;
    }

    .sidebar ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .sidebar li {
        margin-bottom: 10px;
        padding-left: 20px;
    }

    .sidebar li a {
        color: #333;
        text-decoration: none;
    }

    .sidebar li a:hover {
        color: #000;
    }

    .layui-anim {
        animation-duration: 5s;
        -webkit-animation-duration: 5s;
    }

    /*测试*/
    .auItem {
        display: flex;
        align-items: flex-end;
        /*width: 46%;*/
        /*float: right;*/
        height: 10rem;
        padding: 9px;
        margin-top: 10px;
        background-color: white;
        border-radius: 10px;
    }

    #canvas {
        position: fixed;
        width: 43.5%;
        height: 10rem;
    }

</style>
<body>
<!-- 网页背景 -->
<div id="scene" class="stars-wrapper">
    <div data-depth="0.00" class="layer"></div>
    <div data-depth="0.30" class="stars-cluster stars-cluster-1">
        <div class="star star-1"></div>
        <div class="star star-2"></div>
        <div class="star star-3"></div>
        <div class="star star-4"></div>
        <div class="star star-5"></div>
        <div class="star star-6"></div>
        <div class="star star-7"></div>
        <div class="star star-8"></div>
        <div class="star star-9"></div>
        <div class="star star-10"></div>
        <div class="star star-11"></div>
        <div class="star star-12"></div>
        <div class="star star-13"></div>
        <div class="star star-14"></div>
        <div class="star star-15"></div>
        <div class="star star-16"></div>
        <div class="star star-17"></div>
        <div class="star star-18"></div>
        <div class="star star-19"></div>
        <div class="star star-20"></div>
        <div class="star star-21"></div>
        <div class="star star-22"></div>
        <div class="star star-23"></div>
        <div class="star star-24"></div>
        <div class="star star-25"></div>
        <div class="star star-26"></div>
        <div class="star star-27"></div>
        <div class="star star-28"></div>
        <div class="star star-29"></div>
        <div class="star star-30"></div>
        <div class="star star-31"></div>
        <div class="star star-32"></div>
        <div class="star star-33"></div>
        <div class="star star-34"></div>
        <div class="star star-35"></div>
        <div class="star star-36"></div>
        <div class="star star-37"></div>
        <div class="star star-38"></div>
        <div class="star star-39"></div>
        <div class="star star-40"></div>
    </div>
    <div data-depth="0.50" class="stars-cluster stars-cluster-2">
        <div class="star star-1"></div>
        <div class="star star-2"></div>
        <div class="star star-3"></div>
        <div class="star star-4"></div>
        <div class="star star-5"></div>
        <div class="star star-6"></div>
        <div class="star star-7"></div>
        <div class="star star-8"></div>
        <div class="star star-9"></div>
        <div class="star star-10"></div>
        <div class="star star-11"></div>
        <div class="star star-12"></div>
        <div class="star star-13"></div>
        <div class="star star-14"></div>
        <div class="star star-15"></div>
        <div class="star star-16"></div>
        <div class="star star-17"></div>
        <div class="star star-18"></div>
        <div class="star star-19"></div>
        <div class="star star-20"></div>
        <div class="star star-21"></div>
        <div class="star star-22"></div>
        <div class="star star-23"></div>
        <div class="star star-24"></div>
        <div class="star star-25"></div>
        <div class="star star-26"></div>
        <div class="star star-27"></div>
        <div class="star star-28"></div>
        <div class="star star-29"></div>
        <div class="star star-30"></div>
        <div class="star star-31"></div>
        <div class="star star-32"></div>
        <div class="star star-33"></div>
        <div class="star star-34"></div>
        <div class="star star-35"></div>
        <div class="star star-36"></div>
        <div class="star star-37"></div>
        <div class="star star-38"></div>
        <div class="star star-39"></div>
        <div class="star star-40"></div>
    </div>
    <div data-depth="0.90" class="stars-cluster stars-cluster-3">
        <div class="star star-1"></div>
        <div class="star star-2"></div>
        <div class="star star-3"></div>
        <div class="star star-4"></div>
        <div class="star star-5"></div>
        <div class="star star-6"></div>
        <div class="star star-7"></div>
        <div class="star star-8"></div>
        <div class="star star-9"></div>
        <div class="star star-10"></div>
        <div class="star star-11"></div>
        <div class="star star-12"></div>
        <div class="star star-13"></div>
        <div class="star star-14"></div>
        <div class="star star-15"></div>
    </div>
</div>
<!-- 背景结束了 -->
<div class="container">
    <div class="sidebar">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">歌曲名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="so" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layuiadmin-btn-list table-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
            </div>
        </div>
        <table class="layui-hide" id="table" lay-filter="test"></table>
    </div>
    <div class="player">
        <div class="album-cover">
            <img id="pic" src="/static/music/default.png" alt="album cover">
        </div>
        <div class="song-info">
            <h2 id="songName">音乐就是力量</h2>
            <h3 id="authorName">&ensp;</h3>
        </div>
        <div class="controls">
            <button class="play-btn iconfont icon-shangyiqu101"></button>
            <button class="play-btn iconfont play-order icon-24gl-shuffle"></button>
            <button class="play-btn iconfont play-but icon-24gl-playCircle"></button>
            <button class="play-btn iconfont icon-liebiao2"></button>
            <button class="play-btn iconfont icon-xiayiqu101"></button>
        </div>
        <audio id="audio" style="width:0;height:0;display:none;"></audio>
        <div style="height: 30px;width: 100%;margin-top: 20px;">
            <div id="slideTest1" class="demo-slider"></div>
            <div style="margin-top: 5px;">
                <span id="beforeOne">00:00</span>
                <span id="allTime" style="float: right">00:00</span>
            </div>
        </div>
    </div>
    <div class="auItem">
        <canvas id="canvas"></canvas>
    </div>
</div>

</body>
<script src="/res/layui/layui.js"></script>
<script>
    layui.use('slider', function () {
        let $ = layui.$,
            slider = layui.slider,
            audio = $('audio')[0],
            playStatus = 0,  //播放状态
            playUrl = '',  //当前播放地址
            playOrder = 1,  //1随机 2：单曲
            playId = 0,   //当前id
            playHistory = [],  //播放历史
            nowPlayNum = 0,  //当前指针
            schedule = slider.render({
                elem: '#slideTest1',
                tips: false,
                change: function (value) {
                    update(value);
                },
            }),
            context,
            src,
            analyser,
            setTime,
            bufferLength,
            dataArray;
        window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;

        //搜索
        $('.table-search').click(function () {
            let name = $('input[name="so"]').val();
            if (name.length < 1) {
                layer.msg('请输入歌曲名称');
                return false;
            }
            $.ajax({
                url: '/searchMusic',
                type: 'post',
                data: {name: name},
                success: function (res) {
                    console.log(res);
                }
            })
        });

        //播放处理
        $('.play-but').click(function () {
            if (playUrl === '') {
                getMusic();
            }
            if (playStatus === 0) {
                startPlaying();
            } else {
                stopPlaying();
            }
        });

        //播放顺序
        $('.play-order').click(function () {
            if (playOrder === 1) {
                playOrder = 2;
                $('.play-order').attr("class", 'play-btn iconfont play-order icon-24gl-repeatOnce2');
            } else {
                playOrder = 1;
                $('.play-order').attr("class", 'play-btn iconfont play-order icon-24gl-shuffle');
            }
        });

        //上一曲
        $('.icon-shangyiqu101').click(function () {
            let id = playHistory[nowPlayNum - 1];
            nowPlayNum = nowPlayNum - 1;
            if (!id) {
                layer.msg('并未播放歌曲呢！！！');
                return false;
            }
            getMusic(id, false);
            startPlaying();
        });

        //下一曲
        $('.icon-xiayiqu101').click(function () {
            let id = playHistory[nowPlayNum + 1];
            if (id) {
                nowPlayNum += 1;
                getMusic(id, false);
                startPlaying();
            } else {
                getMusic();
                startPlaying();
            }
        });

        //播放监听
        audio.addEventListener("timeupdate", function () {
            let musicTime = audio.duration,
                currentTime = audio.currentTime,
                percent = currentTime / musicTime;
            $('#beforeOne').html(transTime(currentTime));
            $('#allTime').html(transTime(musicTime));
            schedule.setValue(percent * 100); //播放进度
            // soundSpectrum();
        });

        //结束监听
        audio.addEventListener("ended", function () {
            if (playOrder === 1) {  //单曲循环
                let id = playHistory[nowPlayNum + 1];
                if (id) {
                    nowPlayNum += 1;
                    getMusic(id, false);
                } else {
                    getMusic();
                }
            }
            stopPlaying();
        });

        //获取歌曲
        function getMusic(id = 0, status = true) {
            $.ajax({
                type: 'post',
                data: {id: id, currentId: playId},
                url: '/getMusicInfo',
                success: function (res) {
                    if (res.code === 0) {
                        attrMusic(res.data, status);
                    } else {
                        alert('该项目已停止使用！');
                        return false;
                    }
                },
                error: function () {
                    alert('该项目已停止使用！');
                    return false;
                }
            });
        }

        //开始播放
        function startPlaying() {
            playStatus = 1;
            $('.album-cover').attr('class', 'album-cover layui-anim layui-anim-rotate layui-anim-loop');
            $('.play-but').attr("class", 'play-btn iconfont play-but icon-zanting');
            audio.play();
            //音谱处理
            if (!context) {
                context = new AudioContext();
            }
            if (!src) {
                src = context.createMediaElementSource(audio);
            }
            if (!analyser) {
                analyser = context.createAnalyser();
            }
            src.connect(analyser);
            analyser.connect(context.destination);
            analyser.fftSize = 512; //快速傅里叶变换, 必须为2的N次方
            bufferLength = analyser.frequencyBinCount;
            dataArray = new Uint8Array(bufferLength);
            //音谱
            setTime = setInterval(function () {
                soundSpectrum();
            }, 100);
        }

        //停止播放
        function stopPlaying() {
            $('#audio').attr('autoplay', false);
            playStatus = 0;
            $('.album-cover').attr('class', 'album-cover');
            $('.play-but').attr("class", 'play-btn iconfont play-but icon-24gl-playCircle');
            audio.pause();
            //停止渲染
            setTimeout(function () {
                clearTimeout(setTime);
            }, 3500);
        }

        //信息渲染
        function attrMusic(arr, status) {
            playId = arr.id;
            if (status) {
                if (playUrl !== '') {
                    nowPlayNum += 1;
                }
                playHistory.push(arr.id);
            }
            $('#audio').attr('autoplay', true);
            $('#songName').html(arr.title);
            $('#authorName').html(arr.author);
            if (arr.pic.src) {
                $('#pic').attr("src", arr.pic.src);
            } else {
                $('#pic').attr("src", '/static/music/default.png');
            }
            audio.crossOrigin = 'anonymous';
            audio.src = arr.url.src;
            playUrl = arr.url.path;
        }

        //音频渲染
        function soundSpectrum() {
            let canvas = $("#canvas")[0],
                ctx = canvas.getContext("2d");
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            let width = canvas.width,
                height = canvas.height,
                barWidth = width / bufferLength * 2,
                barHeight;
            analyser.getByteFrequencyData(dataArray);
            ctx.clearRect(0, 0, width, height);
            for (var i = 0, x = 0; i < bufferLength; i++) {
                barHeight = dataArray[i] * 2;
                let min = 1,
                    max = 225,
                    r = barHeight + 25 * (i / bufferLength),
                    g = 36 * (i / bufferLength),
                    b = Math.floor(Math.random() * (max - min + 1)) + min;

                console.log(r);
                console.log(g);
                console.log(b);

                ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
                ctx.fillRect(x, height - barHeight, barWidth, barHeight);
                x += barWidth + 4;
            }
        }

        //进度改变
        function update(value) {
            if (audio.duration) {
                //计算是自动还是拖动
                let currentTime = Math.round((audio.currentTime / audio.duration) * 100);
                if (value !== currentTime) {
                    let setTime = audio.duration * (value / 100);
                    audio.currentTime = setTime;
                    if (setTime < audio.duration && playStatus === 1) {
                        startPlaying();
                    }
                }
            }
        }

        //转换音频时长显示
        function transTime(time) {
            let duration = parseInt(time),
                minute = parseInt(duration / 60),
                sec = duration % 60 + '',
                isM0 = ':';
            if (minute === 0) {
                minute = '00';
            } else if (minute < 10) {
                minute = '0' + minute;
            }
            if (sec.length === 1) {
                sec = '0' + sec;
            }
            return minute + isM0 + sec;
        }
    });
</script>
</html>